<template>
    <div>
        <t-row align="center" justify="center" style="width: 100%;height: 100%;position: absolute;">
            <t-space align="center" direction="vertical" style="border: 1px solid #ccc;padding: 20px;">
                <h1>登录</h1>
                <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit" style="width:350px;">
                    <t-form-item name="account">
                        <t-input v-model="formData.account" clearable placeholder="请输入账户名">
                            <template #prefix-icon>
                                <desktop-icon />
                            </template>
                        </t-input>
                    </t-form-item>

                    <t-form-item name="password">
                        <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
                            <template #prefix-icon>
                                <lock-on-icon />
                            </template>
                        </t-input>
                    </t-form-item>

                    <t-form-item>
                        <t-button theme="primary" type="submit" block>登录</t-button>
                    </t-form-item>
                </t-form>
            </t-space>
        </t-row>
    </div>
</template>

<script setup lang="ts">
import { reactive, useTemplateRef } from 'vue';
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';

const formRef = useTemplateRef('form');


const formData = reactive({
    account: '',
    password: ''
})

const onReset = () => {
    formData.account = '';
    formData.password = '';
}

const onSubmit = () => {
    console.log(formData);
    console.log(formRef)
}

</script>

<style lang="less" scoped></style>